<template>
 
  <div>
        <el-dialog v-if="currentStep === 1" v-model="dialogVisible01" title="设置试卷名称" :showClose="false"  :close-on-click-modal="false" width="30%">
          <el-form :model="form" :rules="rules" ref="formRef" label-width="0">
            <el-form-item prop="examName">
              <el-input v-model="form.examName" placeholder="请输入试卷名称"></el-input>
            </el-form-item>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
                            <el-button type="primary" @click="quxiao">取消</el-button>
              <el-button type="primary" @click="handleNextStep">确 定</el-button>
            </span>
          </template>
        </el-dialog>
    
        <el-dialog v-if="currentStep === 2" v-model="dialogVisible01"  :showClose="false" :close-on-click-modal="false" title="设置试卷格式" width="50%">
          <el-form :model="structureInfo" :rules="structureRules" ref="structureFormRef" label-width="100px">
            <el-card class="card-container">
              <h3>试卷结构设置</h3>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="剩余题数" >
                    <el-input type="number" v-model="questionCountDifference.remainingQuestions"  disabled controls-position="right" ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="剩余分值" >
                    <el-input type="number" v-model="questionCountDifference.excessQuestions"   disabled   :precision="2" controls-position="right" class="align-left02"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="总题数" prop="totalQuestionCount">
                    <el-input type="number" v-model="structureInfo.totalQuestionCount"  controls-position="right" ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="总分值" prop="totalScore">
                    <el-input type="number" v-model="structureInfo.totalScore"    :precision="2" controls-position="right" class="align-left02"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="单选题数量" prop="singleChoiceCount">
                    <el-input type="number" v-model="structureInfo.singleChoiceCount" :min="0" controls-position="right" class="align-left"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="每题分值" prop="singleChoiceScore">
                    <el-input type="number" v-model="structureInfo.singleChoiceScore" :min="0"     :precision="2" controls-position="right" class="align-left"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="多选题数量" prop="multipleChoiceCount">
                    <el-input type="number" v-model="structureInfo.multipleChoiceCount" :min="0"  controls-position="right" class="align-left"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="每题分值" prop="multipleChoiceScore">
                    <el-input type="number" v-model="structureInfo.multipleChoiceScore" :min="0"      :precision="2" controls-position="right" class="align-left"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="判断题数量" prop="trueFalseCount">
                    <el-input type="number" v-model="structureInfo.trueFalseCount" :min="0" controls-position="right" class="align-left"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="每题分值" prop="trueFalseScore">
                    <el-input type="number" v-model="structureInfo.trueFalseScore" :min="0"      :precision="2"  controls-position="right" class="align-left"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-card>
    
          </el-form>
          <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="cancel">清空格式</el-button>
            <el-button @click="handlePreviousStep">返回</el-button>
            <el-button type="primary" @click="handleConfirm">去选题</el-button>
          </span>
        </template>
        </el-dialog>
      </div>
  
    <div v-if="kaiguan==false" ></div>
    <div v-else>
    <div  class="container">
      <div v-if="categories.length === 0" class="no-data">
        <p>暂无数据</p>
      </div>
      <div v-else class="flex-container" v-for="(category, index) in categories" :key="index">
        <h1>{{ category.title }}</h1>
        <el-tag 
          v-for="(tag, tagIndex) in category.tags" 
          :key="tagIndex" 
          :type="category.clickedTag.includes(tag) ? 'danger' : 'primary'" 
          @click="handleClick(index, tag)"
        >
          {{ tag }}
        </el-tag>
      </div>
    </div>

    <div>
      <div v-if="allQuestions.length === 0" class="no-data">
        <p>暂无数据</p>
      </div>
      <div v-else v-for="question in allQuestions" :key="question.id" class="quiz-page">
        <h1>{{ question.label }} ({{ question.score }} 分)</h1>
        <div class="question">
          <p v-html="question.description"></p>
          <div class="options">
            <label v-for="option in question.op" :key="option.key">
              <input type="radio" :name="'question-' + question.id" :value="option.key" class="hidden-radio" />
              {{ option.label }}
            </label>
          </div>
          <div v-if="question.Image">
            <img class="preview-question-img" :src="question.Image" />
          </div>
        </div>
        <div class="extra-info">
          <el-button 
            type="primary" 
            @click="submitAnswer(question)" 
            :disabled="selectedQuestions.some(q => q.id === question.id) ||question.score === 0 "
          >
            加入试卷
          </el-button>
        </div>
      </div>
   <!-- 分页条 -->
  <el-pagination 
    v-if="allQuestions.length > 0"
    v-model:current-page="pageno" 
    v-model:page-size="pagesize" 
    :page-sizes="[10, 20, 50, 100]"
    layout="jumper, total, sizes, prev, pager, next" background 
    :total="total" 
    @size-change="handlePageSizeChange"
    @current-change="handlePageChange" 
    style="margin-top: 20px; justify-content: flex-end" />
    </div>
    <div class="preview-button-container">
      <el-button type="primary" @click="saveExam">保存</el-button>
      <!-- <el-button type="primary" @click="dialogVisible01=true">设置</el-button> -->
      <el-badge :value="selectedQuestions.length" :hidden="selectedQuestions.length === 0">
        <el-button type="primary" @click="openQuestionSelector">预览</el-button>
      </el-badge>
    </div>
    
  </div>
  
   
  <!-- 试卷预览对话框 -->
  <el-dialog
    title="试卷预览"
    v-model="previewDialogVisible"
    :fullscreen="isFullscreen"
  >
    <div>
      <el-row :gutter="20">
        <el-col :span="8">
          <h2>试卷名称: {{ form.examName }}</h2>
        </el-col>
        <el-col :span="8">
          <h2>总题数: {{structureInfo.totalQuestionCount }}</h2>
        </el-col>
        <el-col :span="8">
          <h2>总分数: {{structureInfo.totalScore }}</h2>
        </el-col>
      </el-row>
    </div>
    <div v-if="selectedQuestions.length === 0">
      <p>暂无题目</p>
    </div>
    <div v-else>
      <div v-for="question in selectedQuestions" :key="question.id" class="preview-quiz-page">
        <h2>{{ question.label }} ({{ question.score }} 分)</h2>
        <div class="preview-question">
          <p v-html="question.description"></p>
          <div class="preview-options">
            <label v-for="option in question.op" :key="option.key">
              {{ option.label }}
            </label>
          </div>
          <div v-if="question.Image">
            <img class="preview-question-img" :src="question.Image" />
          </div>
        </div>
        <div class="remove-button">
          <el-button type="danger" @click="removeQuestionFromPreview(question)">移除</el-button>
        </div>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="previewDialogVisible = false">关闭</el-button>
        <el-button @click="toggleFullscreen">切换全屏</el-button> <!-- 添加切换全屏按钮 -->
      </span>
    </template>
  </el-dialog>

  </template>
  <script setup>
  import { reactive, ref, computed, watch, onMounted } from 'vue';
  import { getselectsubject,  getdirections, getexaminationList,postexamination,getselectexamination } from '@/api/teacher/examinationService';
  import { useUserInfoStore } from '@/store/user';
  import { ElForm, ElFormItem, ElInput, ElButton, ElDialog, ElMessage,ElMessageBox } from 'element-plus';
  import { useTokenStore01 } from '@/store/token01';
  //路由
  import router from "@/router";
  import { useRoute } from "vue-router";

  const yulansjuan = ref({});
  const aa=ref({});
  const userStore = useUserInfoStore();
  const tokenStore = useTokenStore01();
  const directions = ref([]);
  const selectedProfessional = ref(null);
  const isProfessionalLocked = ref(false);
  const previewDialogVisible = ref(false);
  const pageno = ref(1);
  const pagesize = ref(10);
  const total = ref(0);
  const totalScore1=ref(0);
  const kaiguan=ref(false);
  const totalQuestionCount1=ref(0);
  const examInfo = reactive({
    name: '',
  });
  // 定义三个数组来存储不同类型的题目
  const singleChoiceQuestions = ref([]);
  const multipleChoiceQuestions = ref([]);
  const trueFalseQuestions = ref([]);
  
  const isFullscreen = ref(false); // 添加全屏状态变量
  const dialogVisible01 = ref(false);
    const currentStep = ref(1);
    const formRef = ref(null);
  // 切换全屏状态的方法
  const toggleFullscreen = () => {
    isFullscreen.value = !isFullscreen.value;
  };
  
  const structureInfo = reactive({
    singleChoiceCount: 0,
    singleChoiceScore: 0.00,
    multipleChoiceCount: 0,
    multipleChoiceScore: 0.00,
    trueFalseCount: 0,
    trueFalseScore: 0.00,
    totalQuestionCount: 0, // 确保这些字段存在
    totalScore: 0.00, // 确保这些字段存在
  });
    const quxiao=()=>{
    router.push('/paper');
  }
  
  watch(dialogVisible01, (newVal) => {
    if (!newVal) {
      previewDialogVisible.value = false;
    }
  });
  watch(
    () => ({
      singleChoiceScore: structureInfo.singleChoiceScore,
      multipleChoiceScore: structureInfo.multipleChoiceScore,
      trueFalseScore: structureInfo.trueFalseScore
    }),
    (newScores) => {
      // 更新 allQuestions 中的题目分数
      allQuestions.value.forEach(question => {
        if (question.type === 2) { // 单选题
          question.score = newScores.singleChoiceScore;
        } else if (question.type === 1) { // 多选题
          question.score = newScores.multipleChoiceScore;
        } else if (question.type === 0) { // 判断题
          question.score = newScores.trueFalseScore;
        }
      });
  
      // 更新 selectedQuestions 中的题目分数
      selectedQuestions.value = selectedQuestions.value.map(selectedQuestion => {
        const updatedQuestion = allQuestions.value.find(q => q.id === selectedQuestion.id);
        return updatedQuestion ? { ...updatedQuestion } : selectedQuestion;
      });
  
       
    },
    { deep: true }
  );
  // 新增的知识点列表
  const knowledgePoints = ref([]);
  const totalQuestionCount = ref(0);
  
  
  // 将 totalScore 改为 ref
  const totalScore = ref(0);
  
  
  // 计算已选题目的详细信息
  const selectedQuestionsWithDetails = computed(() => {
    return selectedQuestions.value.map(id => allQuestions.value.find(q => q.id === id));
  });
  
  const selectedQuestions = ref([]);
  const selectedQuestions01 = ref([]);
  
  
  // 计算已选题目的详细信息，包括分数
  
  
  const allQuestions = ref([]);
  
  const handleClick = (categoryIndex, tag) => {
    const category = categories.value[categoryIndex];
  
    if (category.title === '知识点') {
      // 处理知识点的多选逻辑
      const tagIndex = category.clickedTag.indexOf(tag);
      if (tagIndex > -1) {
        category.clickedTag.splice(tagIndex, 1); // 移除标签
      } else {
        category.clickedTag.push(tag); // 添加标签
      }
    } else if (category.title === '难度' || category.title === '类型') {
      // 处理单选逻辑
      if (category.clickedTag.includes(tag)) {
        category.clickedTag = []; // 取消当前选中的标签
      } else {
        category.clickedTag = [tag]; // 设置新的选中的标签
      }
    }
  
    printSelectedTags();
  };
  
  const QUESTION_TYPE_MAP = {
    2: 'singleChoiceCount',
    1: 'multipleChoiceCount',
    0: 'trueFalseCount'
  };
  
  const removeQuestionFromPreview = (question) => {
    const index = selectedQuestions.value.findIndex(q => q.id === question.id);
    if (index === -1) {
      ElMessage.warning('该题目不在当前试卷中');
      return;
    }
  
    // 移除题目
    selectedQuestions.value.splice(index, 1);
  
    // 同步更新结构信息
    const xx=ref([]);
    const xx1=ref([]);
    const xx2=ref([]);
    for(let i=0;i< selectedQuestions.value.length;i++){
      if(selectedQuestions.value[i].type===2){
        xx.value.push(selectedQuestions.value[i]);
      }else if(selectedQuestions.value[i].type===1){
        xx1.value.push(selectedQuestions.value[i]);
      }else if(selectedQuestions.value[i].type===0){
        xx2.value.push(selectedQuestions.value[i]);
      }
    }
    totalScore1.value=xx.value.length*structureInfo.singleChoiceScore+xx1.value.length*structureInfo.multipleChoiceScore+xx2.value.length*structureInfo.trueFalseScore;
    totalQuestionCount1.value=xx.value.length+xx1.value.length+xx2.value.length;
    aa.value.totalScore1=totalScore1.value;
    aa.value.totalQuestionCount1=totalQuestionCount1.value;
    tokenStore.token01=aa.value;
    // console.log('structureInfo:sbsbsbsbsbsbs');
    // console.log(tokenStore.token01)
    ElMessage.success('题目移除成功');
  };
  
  const printSelectedTags = () => {
    const allSelectedTags = categories.value.flatMap(category => category.clickedTag);
  
    // 分类处理
    const questionTypes = ['单选题', '多选题', '判断题'];
    const difficultyLevels = ['低', '中', '高'];
  
    const categorizedTags = {
      questionTypes: [],
      difficultyLevels: [],
      others: []
    };
  
    allSelectedTags.forEach(tag => {
      if (questionTypes.includes(tag)) {
        categorizedTags.questionTypes.push(tag);
      } else if (difficultyLevels.includes(tag)) {
        categorizedTags.difficultyLevels.push(tag);
      } else {
        categorizedTags.others.push(tag);
      }
    });
  
    // 将标签转换为对应的数值
    const questionTypesValues = categorizedTags.questionTypes.map(tag => {
      switch (tag) {
        case '单选题': return 2;
        case '多选题': return 1;
        case '判断题': return 0;
        default: return tag; // 这里理论上不会执行
      }
    });
  
    const difficultyLevelsValues = categorizedTags.difficultyLevels.map(tag => {
      switch (tag) {
        case '低': return 1;
        case '中': return 2;
        case '高': return 3;
        default: return tag; // 这里理论上不会执行
      }
    });
  
    // 对于 others，使用 xx.value 中的 label_id
    const othersValues = categorizedTags.others.map(tag => {
      const item = xx.value.find(x => x.label_name === tag);
      return item ? item.label_id : tag; // 如果找不到对应的 label_id，则返回原始标签
    });
  
    // 转换为字符串
   subject_type.value = questionTypesValues.join('');
   subject_lv.value = difficultyLevelsValues.join('');
   subject_label.value = othersValues.join(',');
    // console.log(subject_type.value, subject_lv.value, subject_label.value);
    fetchSubjectData(subject_type.value, subject_lv.value, subject_label.value)
  };
  const subject_label=ref('');
  const subject_lv=ref('');
  const subject_type=ref('');
  
  const submitAnswer = (question) => {
    const xx=ref([]);
    const xx1=ref([]);
    const xx2=ref([]);
  
    for(let i=0;i< selectedQuestions.value.length;i++){
      if(selectedQuestions.value[i].type===2){
        xx.value.push(selectedQuestions.value[i]);
      }else if(selectedQuestions.value[i].type===1){
        xx1.value.push(selectedQuestions.value[i]);
      }else if(selectedQuestions.value[i].type===0){
        xx2.value.push(selectedQuestions.value[i]);
      }
    }
  
  
    // console.log(xx.value);
    // console.log(xx1.value);
    // console.log(xx2.value);
  
   // 检查并添加单选题
   if (structureInfo.singleChoiceCount !== 0 && question.type === 2) {
      if (xx.value.length >= structureInfo.singleChoiceCount) {
        ElMessage.warning('单选题数量超出');
        return;
      } else {
        xx.value.push(question); // 添加当前题目
        const ee = structureInfo.singleChoiceCount - xx.value.length;
        ElMessage.success('题目添加成功，单选题还差' + ee + '题');
      }
    }
  
  
    // 检查并添加多选题
    if (structureInfo.multipleChoiceCount !== 0 && question.type === 1) {
      if (xx1.value.length >= structureInfo.multipleChoiceCount) {
        ElMessage.warning('多选题数量超出');
        return;
      } else {
        xx1.value.push(question); // 添加当前题目
        const ee = structureInfo.multipleChoiceCount - xx1.value.length;
        ElMessage.success('题目添加成功，多选题还差' + ee + '题');
      }
    }
   
    // 检查并添加判断题
    if (structureInfo.trueFalseCount !== 0 && question.type === 0) {
      if (xx2.value.length >= structureInfo.trueFalseCount) {
        ElMessage.warning('判断题数量超出');
        return;
      } else {
        xx2.value.push(question); // 添加当前题目
  
        const ee = structureInfo.trueFalseCount - xx2.value.length;
        ElMessage.success('题目添加成功，判断题还差' + ee + '题');
      }
    }
  
  
    if (!selectedQuestions.value.some(q => q.id === question.id)) {
  
      selectedQuestions.value.push({
        ...question,
        score: question.score // 确保分数也被传递过去
      });
      aa.value.xx = selectedQuestions.value;
      // console.log(aa.value)
      // selectedQuestions.value = aa.value.xx;
      // console.log(selectedQuestions.value);
      const tt=ref([]);
    const tt1=ref([]);
    const tt2=ref([]);
  
    for(let i=0;i< selectedQuestions.value.length;i++){
      if(selectedQuestions.value[i].type===2){
        tt.value.push(selectedQuestions.value[i]);
      }else if(selectedQuestions.value[i].type===1){
        tt1.value.push(selectedQuestions.value[i]);
      }else if(selectedQuestions.value[i].type===0){
        tt2.value.push(selectedQuestions.value[i]);
      }
    }
  
      totalScore1.value=tt.value.length*structureInfo.singleChoiceScore+tt1.value.length*structureInfo.multipleChoiceScore+tt2.value.length*structureInfo.trueFalseScore;
      totalQuestionCount1.value=tt.value.length+tt1.value.length+tt2.value.length;
      // console.log('structureInfo:', totalScore1.value);
    
      aa.value.totalScore1=totalScore1.value;
    aa.value.totalQuestionCount1=totalQuestionCount1.value;
    tokenStore.token01=aa.value;
  
    } else {
      ElMessage.warning('题目已存在于试卷中');
    }
  
   
    
  
  
  };
  
  
  //查询某试卷的基础信息以及试题
  const selectexamination = async (examination_id) => {
    try {
      const result = await getselectexamination(examination_id);
      // console.log('API Response:', result);
      // 假设返回的数据结构为 { examination, questions }
      form.value.examName = result.data.examinationInfo.examination_name; 
      structureInfo.totalScore    = result.data.examinationInfo.examination_score;
  totalScore1.value    = result.data.examinationInfo.examination_score;
  totalQuestionCount1.value    = result.data.questions.length;
      structureInfo.totalQuestionCount    = result.data.questions.length;
      selectedQuestions.value = result.data.questions.map(question => ({
        id: question.questiones_subject,
        label: `${question.subject_name} (${question.subject_type === 0 ? '判断题' : question.subject_type === 2 ? '单选题' : question.subject_type === 1 ? '多选题': '未知'})`,
        description: question.description || '',
        type: question.subject_type,
        Image: question.image || '',
        op: [
          { key: 1, label: question.option_a ? 'A.' + question.option_a : '' },
          { key: 2, label: question.option_b ? 'B.' + question.option_b : '' },
          { key: 3, label: question.option_c ? 'C.' + question.option_c : '' },
          { key: 4, label: question.option_d ? 'D.' + question.option_d : '' },
          { key: 5, label: question.option_e ? 'E.' + question.option_e : '' },
          { key: 6, label: question.option_f ? 'F.' + question.option_f : '' },
        ].filter(option => option.label && option.label !== 'undefined'),
        score: question.questiones_score || 0,
      }));
  
      // 更新结构信息
      structureInfo.singleChoiceCount = selectedQuestions.value.filter(q => q.type === 2).length;
      structureInfo.multipleChoiceCount = selectedQuestions.value.filter(q => q.type === 1).length;
      structureInfo.trueFalseCount = selectedQuestions.value.filter(q => q.type === 0).length;
  
      // 根据题目的类型更新每题分值
      const singleChoiceScores = selectedQuestions.value.filter(q => q.type === 2).map(q => q.score);
      const multipleChoiceScores = selectedQuestions.value.filter(q => q.type === 1).map(q => q.score);
      const trueFalseScores = selectedQuestions.value.filter(q => q.type === 0).map(q => q.score);
  
      if (singleChoiceScores.length > 0) {
        structureInfo.singleChoiceScore = singleChoiceScores[0]; // 假设所有单选题的分值相同
      }
      if (multipleChoiceScores.length > 0) {
        structureInfo.multipleChoiceScore = multipleChoiceScores[0]; // 假设所有多选题的分值相同
      }
      if (trueFalseScores.length > 0) {
        structureInfo.trueFalseScore = trueFalseScores[0]; // 假设所有判断题的分值相同
      }
  
      // console.log(selectedQuestions.value);
    } catch (error) {
      console.error('Error fetching subject data:', error);
    }
  };
  const routget=useRoute();
  const id=ref(0)
  onMounted(() => {
   
    examinationList();
    // if (tokenStore.token01) {
    //   aa.value.examName = form.value.examName;
    // }
    // fetchDirectionData();
    id.value=routget.query.eid||0
    if (id.value) {

      kaiguan.value=true;
      selectexamination(id.value); 
      fetchSubjectData(1); // 如果有试卷ID，则加载已有试卷信息
      previewDialogVisible.value=true;
      toggleFullscreen()
    } else {
    //console.log('token01',tokenStore.token01) 
    if(tokenStore.token01!=''){
      aa.value=tokenStore.token01;
    }
     const ff=tokenStore.token01
    // console.log(ff.structureInfo)
   
      if(ff.examName!=undefined){
       form.value.examName = ff.examName;
      //  console.log(tokenStore.token01.examData)
  
      }else{
        dialogVisible01.value=true;
      }
      if(ff.structureInfo!=undefined){
        structureInfo.multipleChoiceCount = ff.structureInfo.multipleChoiceCount;
       structureInfo.multipleChoiceScore = ff.structureInfo.multipleChoiceScore;
       structureInfo.singleChoiceCount = ff.structureInfo.singleChoiceCount;
       structureInfo.singleChoiceScore = ff.structureInfo.singleChoiceScore;
       structureInfo.totalQuestionCount = ff.structureInfo.totalQuestionCount;
       structureInfo.totalScore = ff.structureInfo.totalScore;
       structureInfo.trueFalseCount = ff.structureInfo.trueFalseCount;
       structureInfo.trueFalseScore = ff.structureInfo.trueFalseScore;
      }
       if(ff.xx!=undefined){
        selectedQuestions.value = ff.xx;
       }
     if(ff.totalScore1!=undefined){
      totalScore1.value=ff.totalScore1;
     }
  if(ff.totalQuestionCount1!=undefined){
    totalQuestionCount1.value=ff.totalQuestionCount1;
  }
  if(ff.kaiguan!=undefined){
    kaiguan.value=ff.kaiguan;
  }
      // console.log("hsaubdydsavfbw")
      // console.log(selectedQuestions);
    
      fetchSubjectData();
  
    }
  });
 
  // 添加分页相关的事件处理函数
  const handlePageChange = (newPage) => {
    pageno.value = newPage;
    let subjectId=userStore.userInfo.majorId;
    // console.log(subjectId, pageno.value, pagesize.value);
    fetchSubjectData(subjectId, pageno.value, pagesize.value);
  };
  
  const handlePageSizeChange = (newPageSize) => {
    pagesize.value = newPageSize;
    pageno.value = 1; // 重置页码
    let subjectId=userStore.userInfo.majorId
    fetchSubjectData(subjectId, pageno.value, pagesize.value);
  };
  const xx = ref([]);
  const examinationList = async () => {
    try {
      let major_id=userStore.userInfo.majorId;
      const result = await getexaminationList(major_id);
      // console.log(2);
      // console.log(result);
       xx.value = result.data;
      // 更新 categories 中的知识点标签
      categories.value[0].tags = result.data.map(item => item.label_name);
      categories.value[0].tagMap = result.data.reduce((acc, item) => {
        acc[item.label_name] = item.label_id;
        return acc;
      }, {});
  
      // console.log(categories.value);
    } catch (error) {
      console.error('Error fetching examination list:', error);
    }
  };
  
  // 初始化标签映射
  const categories = ref([
    { title: '知识点', tags: [], clickedTag: [], tagMap: {} },
    { title: '难度', tags: ['低', '中', '高'], clickedTag: [], tagMap: { '低': 1, '中': 2, '高': 3 } },
    { title: '类型', tags: ['单选题', '多选题', '判断题'], clickedTag: [], tagMap: { '单选题': 2, '多选题': 1, '判断题': 0 } },
  ]);
  const tt=ref({});
    const danxuan =ref(0)
  const duoxuan =ref(0)
  const panduan =ref(0)
  const fetchSubjectData = async (subjectId) => {
    tt.value.subject_major = userStore.userInfo.majorId;
    tt.value.pagesize=pagesize.value;
    tt.value.pageno=pageno.value;
    if(subject_type.value!=''&&subject_type.value!=undefined){
      tt.value.subject_type=subject_type.value;
    }
    if(subject_lv.value!=''&&subject_lv.value!=undefined){
      tt.value.subject_lv=subject_lv.value;
    }
    if(subject_label.value!=''&&subject_label.value!=undefined){
      tt.value.subject_label=subject_label.value;
    }
    // console.log("tt");
    // console.log(tt.value);
  
    try {
      let result;
      // console.log(subjectId);
    
        result = await getselectsubject(tt);
      
     
      // console.log(result.data);
      allQuestions.value = result.data.data.map(question => {
        let typeLabel = '';
        let score = 0; // 初始化分数为0
        switch (question.subject_type) {
          case 2:
            typeLabel = '（单选题）';
            score = structureInfo.singleChoiceScore; // 使用单选题的分数
                   danxuan.value+=1;
            break;
          case 1:
            typeLabel = '（多选题）';
            score = structureInfo.multipleChoiceScore; // 使用多选题的分数
            duoxuan.value+=1;
            break;
          case 0:
            typeLabel = '（判断题）';
            score = structureInfo.trueFalseScore; // 使用判断题的分数
            panduan.value+=1;
            break;
          default:
            typeLabel = '';
        }
        return {
          id: question.subject_id,
          label: `${question.subject_name}${typeLabel}`,
          description: question.subject_description, // 确保 description 字段存在
          type: question.subject_type,
          Image: question.subject_image,
          op: [
            { key: 1, label: 'A.' + question.option_a },
            { key: 2, label: 'B.' + question.option_b },
            { key: 3, label: 'C.' + question.option_c },
            { key: 4, label: 'D.' + question.option_d },
            { key: 5, label: 'E.' + question.option_e },
            { key: 6, label: 'F.' + question.option_f },
          ].filter(option => option.label !== 'A.undefined' && option.label !== 'B.undefined' && option.label !== 'C.undefined' && option.label !== 'D.undefined' && option.label !== 'E.undefined' && option.label !== 'F.undefined'
            && option.label !== 'A.' && option.label !== 'B.' && option.label !== 'C.' && option.label !== 'D.' && option.label !== 'E.' && option.label !== 'F.'
          ),
          score: score // 添加分数字段
        };
      });
  
      // 根据 type 排序：0（判断题）、1（单选题）、2（多选题）
      allQuestions.value.sort((a, b) => a.type - b.type);
      total.value = result.data.count;
      tt.value={}
      // console.log(allQuestions.value);
    } catch (error) {
      // console.log("错误");
      console.error('Failed to fetch subject data:', error);
    }
  };
  
  const fetchDirectionData = async () => {
    try {
      const result = await getdirections();
      // console.log(result.data);
      directions.value = result.data;
  
      // 设置默认选中的专业为第一个方向
      if (result.data.length > 0) {
        selectedProfessional.value = result.data[0].direction_id;
      }
    } catch (error) {
      console.error('Failed to fetch direction data:', error);
    }
  };
  
  const cancel = () => {
    tokenStore.removeToken01()
    // 这里应该包含取消创建试卷的逻辑，如重置表单
    examInfo.name = '';
  
    structureInfo.singleChoiceCount = 0;
    structureInfo.singleChoiceScore = 0;
    structureInfo.multipleChoiceCount = 0;
    structureInfo.multipleChoiceScore = 0;
    structureInfo.trueFalseCount = 0;
    structureInfo.trueFalseScore = 0;
    structureInfo.totalScore = 0;
    structureInfo.totalQuestionCount = 0;
    selectedQuestions.value = [];
  };
  
  const isStructureValid = computed(() => {
    return (structureInfo.singleChoiceCount * structureInfo.singleChoiceScore) +
           (structureInfo.multipleChoiceCount * structureInfo.multipleChoiceScore) +
           (structureInfo.trueFalseCount * structureInfo.trueFalseScore) > 0;
  });
  
  const saveExam = async () => {
    // 验证试卷名称是否为空
    // if (!examInfo.name.trim()) {
    //   ElMessage.error('请输入试卷名称');
    //   return;
    // }
    if(form.value.examName==''||structureInfo.totalScore===0||structureInfo.totalQuestionCount===0){
      ElMessage.error('请填写完整信息');
      return;
    }
    if (totalScore1.value !== Number(structureInfo.totalScore)) {
    const kk = totalScore1.value - Number(structureInfo.totalScore);
    ElMessage.error('还有剩余分值' + kk + '分未分配');
    return;
  }
  if (totalQuestionCount1.value !== Number(structureInfo.totalQuestionCount)) {
    const kk = totalQuestionCount1.value - Number(structureInfo.totalQuestionCount);
    ElMessage.error('还有剩余题目' + kk + '题未分配');
    return;
  }
    // 创建一个数组来存储题目ID和分数
    const questionsData = selectedQuestions.value.map(question => ({
      questionesSubject: question.id,
      questionesScore: question.score
    }));
  
    // 封装数据到一个对象中
    const examData = {
      examinationId: id.value,
      examinationTeacherId: userStore.userInfo.userId,
      examinationName: form.value.examName,
      examinationScore: 0.00,
      examinationType: userStore.userInfo.majorId,
      questions: questionsData // 添加题目数组
    };
     
   // console.log('准备保存的试卷数据:', examData);
  
    try {
  const x = Number(structureInfo.totalScore);
  const x1 = Number(userStore.userInfo.majorId);
  const x3=Number(userStore.userInfo.userId);
  const x4=Number(id.value);
  // const pp = x.toFixed(2);
      // console.log("pppppppppppppppppppppppppppppppppppp");
      // console.log(pp);
      examData.examinationScore=x;
      examData.examinationType=x1;
      examData.examinationTeacherId=x3;
      examData.examinationId=x4;
      const result = await postexamination(examData);
      if (result.code === 200) {
        // console.log(examData);
        cancel(); // 清空表单
        tokenStore.removeToken01();
        // location.reload();
        ElMessage.success('保存试卷成功');
        router.push('/paper');
      } else {
        ElMessage.error('保存试卷失败');
      }
    } catch (error) {
      console.error('保存试卷时发生错误:', error);
      ElMessage.error('保存试卷失败');
    }
  };
  
  
  
  
  //预览试卷点击按钮
  const openQuestionSelector = () => {
    // console.log("aa对象");
    // console.log(aa.value);
    aa.value=tokenStore.token01
    if(useTokenStore01().token01!=null || useTokenStore01().token01==undefined || useTokenStore01().token01=='' || useTokenStore01().token01=={}){
      //不为null则为有值，不进行pinia存值
    }else{
     useTokenStore01().setToken01(aa.value);
    }
    // console.log("pinia里的aa对象");
    // console.log( tokenStore.token01);
    yulansjuan.value =  tokenStore.token01
    // 如果有 id，则直接打开预览对话框
    if (id.value) {
      previewDialogVisible.value = true;
      return;
    }
    const xx=ref([])
    const xx1=ref([])
    const xx2=ref([])
    // console.log(totalScore1.value);
    // console.log(structureInfo.totalScore);
  
    for(let i=0;i<selectedQuestions.value.length;i++){
      if(selectedQuestions.value[i].type==0){
         xx.value.push(selectedQuestions.value[i])
      }else if(selectedQuestions.value[i].type==1){
         xx1.value.push(selectedQuestions.value[i])
      }else if(selectedQuestions.value[i].type==2){
         xx2.value.push(selectedQuestions.value[i])
      }
    }
    //  console.log("dx"+xx2.value);
    //  console.log("pd"+xx.value);
    //   console.log("ddx"+xx1.value);
  if (totalScore1.value !== Number(structureInfo.totalScore)) {
    const kk = totalScore1.value - Number(structureInfo.totalScore);
    ElMessage.error('还有剩余分值' + kk + '分未分配');
    return;
  }
  if (totalQuestionCount1.value !== Number(structureInfo.totalQuestionCount)) {
    const kk = totalQuestionCount1.value - Number(structureInfo.totalQuestionCount);
    ElMessage.error('还有剩余题目' + kk + '题未分配');
    return;
  }
    // 打印预览试卷中的所有题目及其相关信息
    // console.log('预览试卷中的题目:', selectedQuestions.value);
  
    // 确保在打开预览对话框之前重新计算总题数和总分值
  
  
    previewDialogVisible.value = true;
    // aa.value.selectedQuestions=selectedQuestions.value
  //   tokenStore().setToken01=aa.value
  // console.log(tokenStore().getToken01);
  };
  //格式
  const form = ref({
      examName: ''
    });
    
    // const structureInfo = ref({
    //   totalQuestionCount: 0,
    //   totalScore: 0,
    //   singleChoiceCount: 0,
    //   singleChoiceScore: 0,
    //   multipleChoiceCount: 0,
    //   multipleChoiceScore: 0,
    //   trueFalseCount: 0,
    //   trueFalseScore: 0
    // });
    
  const rules = ref({
    examName: [{ required: true, message: '请输入试卷名称', trigger: 'blur' }],
    examDetails: [{ required: true, message: '请输入试卷详情', trigger: 'blur' }]
  });
  
  const structureRules = ref({
    totalQuestionCount: [
      { required: true, message: '请输入总题数', trigger: 'blur' },
      {
        validator: (rule, value) => {
          // 将 value 转换为数字
          const numValue = Number(value);
          if (isNaN(numValue)) {
            return new Error('请输入有效的数字');
          }
          // 检查是否为非负整数
          if (!Number.isInteger(numValue) || numValue < 0) {
            return new Error('总题数必须是非负整数');
          }
          if (numValue>total.value) {
            return new Error('题库题数不足');
          }
          return true;
        },
        trigger: 'blur'
      }
    ],
    totalScore: [
      { required: true, message: '请输入总分值', trigger: 'blur' },
      {
        validator: (rule, value) => {
          // 将 value 转换为数字
          const numValue = Number(value);
          if (isNaN(numValue)) {
            return new Error('请输入有效的数字');
          }
          // 检查是否为非负数
          if (numValue < 0) {
            return new Error('总分值不能为负数');
          }
          return true;
        },
        trigger: 'blur'
      }
    ],
    singleChoiceCount: [
      { required: true, message: '请输入单选题数量', trigger: 'blur' },
      {
        validator: (rule, value) => {
          // 将 value 转换为数字
          const numValue = Number(value);
          // 将 structureInfo.totalQuestionCount 转换为数字
          const numTotalQuestionCount = Number(structureInfo.totalQuestionCount);
          if (isNaN(numValue)) {
            return new Error('请输入有效的数字');
          }
          // 检查是否为非负整数
          if (!Number.isInteger(numValue) || numValue < 0) {
            return new Error('单选题数量必须是非负整数');
          }
            if(numValue>danxuan.value){
            return new Error('单选题数量不足');
          }
          // 检查是否大于总题数
          if (numValue > numTotalQuestionCount) {
            return new Error('单选题数量不能大于总题数');
          }
          return true;
        },
        trigger: 'blur'
      }
    ],
    singleChoiceScore: [
      { required: true, message: '请输入单选题每题分值', trigger: 'blur' },
      {
        validator: (rule, value) => {
          // 将 value 转换为数字
          const numValue = Number(value);
          if (isNaN(numValue)) {
            return new Error('请输入有效的数字');
          }
          // 检查是否为非负数
          if (numValue < 0) {
            return new Error('单选题每题分值不能为负数');
          }
          return true;
        },
        trigger: 'blur'
      }
    ],
    multipleChoiceCount: [
      { required: true, message: '请输入多选题数量', trigger: 'blur' },
      {
        validator: (rule, value) => {
          // 将 value 转换为数字
          const numValue = Number(value);
          // 将 structureInfo.totalQuestionCount 转换为数字
          const numTotalQuestionCount = Number(structureInfo.totalQuestionCount);
          if (isNaN(numValue)) {
            return new Error('请输入有效的数字');
          }
          // 检查是否为非负整数
          if (!Number.isInteger(numValue) || numValue < 0) {
            return new Error('多选题数量必须是非负整数');
          }
            if(numValue>duoxuan.value){
            return new Error('多选题数量不足');
          }
          // 检查是否大于总题数
          if (numValue > numTotalQuestionCount) {
            return new Error('多选题数量不能大于总题数');
          }
          return true;
        },
        trigger: 'blur'
      }
    ],
    multipleChoiceScore: [
      { required: true, message: '请输入多选题每题分值', trigger: 'blur' },
      {
        validator: (rule, value) => {
          // 将 value 转换为数字
          const numValue = Number(value);
          if (isNaN(numValue)) {
            return new Error('请输入有效的数字');
          }
          // 检查是否为非负数
          if (numValue < 0) {
            return new Error('多选题每题分值不能为负数');
          }
          return true;
        },
        trigger: 'blur'
      }
    ],
    trueFalseCount: [
      { required: true, message: '请输入判断题数量', trigger: 'blur' },
      {
        validator: (rule, value) => {
          // 将 value 转换为数字
          const numValue = Number(value);
          // 将 structureInfo.totalQuestionCount 转换为数字
          const numTotalQuestionCount = Number(structureInfo.totalQuestionCount);
          if (isNaN(numValue)) {
            return new Error('请输入有效的数字');
          }
          // 检查是否为非负整数
          if (!Number.isInteger(numValue) || numValue < 0) {
            return new Error('判断题数量必须是非负整数');
          }
          if(numValue>panduan.value){
            return new Error('判断题数量不足');
          }
          // 检查是否大于总题数
          if (numValue > numTotalQuestionCount) {
            return new Error('判断题数量不能大于总题数');
          }
          return true;
        },
        trigger: 'blur'
      }
    ],
    trueFalseScore: [
      { required: true, message: '请输入判断题每题分值', trigger: 'blur' },
      {
        validator: (rule, value) => {
          // 将 value 转换为数字
          const numValue = Number(value);
          if (isNaN(numValue)) {
            return new Error('请输入有效的数字');
          }
          // 检查是否为非负数
          if (numValue < 0) {
            return new Error('判断题每题分值不能为负数');
          }
          return true;
        },
        trigger: 'blur'
      }
    ]
  });
  
  // 添加一个方法来验证总题数和总分值
  const validateTotalCountsAndScores = () => {
    const numTotalQuestionCount = Number(structureInfo.totalQuestionCount);
    const numTotalScore = Number(structureInfo.totalScore);
  
    const numSingleChoiceCount = Number(structureInfo.singleChoiceCount);
    const numSingleChoiceScore = Number(structureInfo.singleChoiceScore);
  
    const numMultipleChoiceCount = Number(structureInfo.multipleChoiceCount);
    const numMultipleChoiceScore = Number(structureInfo.multipleChoiceScore);
  
    const numTrueFalseCount = Number(structureInfo.trueFalseCount);
    const numTrueFalseScore = Number(structureInfo.trueFalseScore);
  
    // 检查总题数
    const totalQuestionCountSum = numSingleChoiceCount + numMultipleChoiceCount + numTrueFalseCount;
    if (totalQuestionCountSum > numTotalQuestionCount) {
      ElMessage.error('所有题型的数量之和不能超过总题数');
      return false;
    }
  
    // 检查总分值
    const totalScoreSum = (numSingleChoiceCount * numSingleChoiceScore) +
                          (numMultipleChoiceCount * numMultipleChoiceScore) +
                          (numTrueFalseCount * numTrueFalseScore);
    if (totalScoreSum > numTotalScore) {
      ElMessage.error('所有题型的总分不能超过总分值');
      return false;
    }
  
    return true;
  };
  
  
    const handleNextStep = () => {
      formRef.value.validate((valid) => {
        if (valid) {
         // console.log(form.value)
          aa.value.examName=form.value.examName//把试卷名称放入aa变量
          tokenStore.token01=aa.value
          currentStep.value = 2;

          // ElMessage.success('接下来进入试卷选题环节，请精心挑选题目，确保试卷质量');
        } else {
          ElMessage.info('试卷名称不能为空');
        }
      });
    };
    
    const handlePreviousStep = () => {
      currentStep.value = 1;
    };
    
    const structureFormRef = ref(null);
    const questionCountDifference = reactive({
    remainingQuestions: 0, // totalQuestionCount - calculatedTotalQuestionCount
    excessQuestions: 0, // calculatedTotalQuestionCount - totalQuestionCount
  });
  
  watch(
    structureInfo,
    () => {
      const {
        totalQuestionCount = 0,
        totalScore = 0,
        singleChoiceCount = 0,
        singleChoiceScore = 0,
        multipleChoiceCount = 0,
        multipleChoiceScore = 0,
        trueFalseCount = 0,
        trueFalseScore = 0
      } = structureInfo;
  
      // 将所有数值转换为数字
      const numTotalQuestionCount = Number(totalQuestionCount);
      const numTotalScore = Number(totalScore);
      const numSingleChoiceCount = Number(singleChoiceCount);
      const numSingleChoiceScore = Number(singleChoiceScore);
      const numMultipleChoiceCount = Number(multipleChoiceCount);
      const numMultipleChoiceScore = Number(multipleChoiceScore);
      const numTrueFalseCount = Number(trueFalseCount);
      const numTrueFalseScore = Number(trueFalseScore);
  
      const calculatedTotalScore = (
        numSingleChoiceCount * numSingleChoiceScore +
        numMultipleChoiceCount * numMultipleChoiceScore +
        numTrueFalseCount * numTrueFalseScore
      );
  
      const calculatedTotalQuestionCount = (
        numSingleChoiceCount +
        numMultipleChoiceCount +
        numTrueFalseCount
      );
  
      questionCountDifference.remainingQuestions = numTotalQuestionCount - calculatedTotalQuestionCount;
      questionCountDifference.excessQuestions = numTotalScore - calculatedTotalScore;
  
    },
    { deep: true }
  );
    //设置格式确定按钮
  const handleConfirm = () => {
  
  
    if (currentStep.value === 1) {
      currentStep.value = 2;
    } else if (currentStep.value === 2) {
      structureFormRef.value.validate((valid2) => {
        if (valid2 && structureInfo) {
  
          
          const {
            totalQuestionCount = 0,
            totalScore = 0,
            singleChoiceCount = 0,
            singleChoiceScore = 0,
            multipleChoiceCount = 0,
            multipleChoiceScore = 0,
            trueFalseCount = 0,
            trueFalseScore = 0
          } = structureInfo;
  
          // 将所有数值转换为数字
          const numTotalQuestionCount = Number(totalQuestionCount);
          const numTotalScore = Number(totalScore);
          const numSingleChoiceCount = Number(singleChoiceCount);
          const numSingleChoiceScore = Number(singleChoiceScore);
          const numMultipleChoiceCount = Number(multipleChoiceCount);
          const numMultipleChoiceScore = Number(multipleChoiceScore);
          const numTrueFalseCount = Number(trueFalseCount);
          const numTrueFalseScore = Number(trueFalseScore);
  
          const calculatedTotalScore = (
            numSingleChoiceCount * numSingleChoiceScore +
            numMultipleChoiceCount * numMultipleChoiceScore +
            numTrueFalseCount * numTrueFalseScore
          );
  
          const calculatedTotalQuestionCount = (
            numSingleChoiceCount +
            numMultipleChoiceCount +
            numTrueFalseCount
          );
  
          if (numTotalQuestionCount === 0) {
            ElMessage.error('总题数不能为0。');
            return;
          }
  
          if (numTotalScore === 0) {
            ElMessage.error('总分值不能为0。');
            return;
          }
         if(numSingleChoiceCount!=0){
           if(numSingleChoiceScore===0){
             ElMessage.error('单选题分值不能为0。');
             return;
           }
         }
         if(numMultipleChoiceCount!=0){
           if(numMultipleChoiceScore===0){
             ElMessage.error('多选题分值不能为0。');
             return;
           }
         }
         if(numTrueFalseCount!=0){
           if(numTrueFalseScore===0){
             ElMessage.error('判断题分值不能为0。');
             return;
           }
         }
          if (calculatedTotalQuestionCount < numTotalQuestionCount) {
            ElMessage.error(`还剩余 ${numTotalQuestionCount - calculatedTotalQuestionCount} 题未分配。`);
            return;
          }
  
          if (calculatedTotalQuestionCount > numTotalQuestionCount) {
            ElMessage.error(`超出总题数 ${calculatedTotalQuestionCount - numTotalQuestionCount} 题。`);
            return;
          }
  
          if (calculatedTotalScore < numTotalScore) {
            ElMessage.error(`还剩余 ${numTotalScore - calculatedTotalScore} 分未分配。`);
            return;
          }
  
          if (calculatedTotalScore > numTotalScore) {
            ElMessage.error(`超出总分值 ${calculatedTotalScore - numTotalScore} 分。`);
            return;
          }
  
          if (
            numTotalQuestionCount !== calculatedTotalQuestionCount ||
            numTotalScore !== calculatedTotalScore
          ) {
            ElMessage.error('总分或总题数不正确。请检查您的输入是否符合规则。');
          } else {
            dialogVisible01.value = false;
            previewDialogVisible.value = true; // 打开预览对话框
          }
          aa.value.structureInfo = structureInfo; // 存入试卷相关信息
          ElMessageBox.alert('接下来进入试卷选题环节，请精心挑选题目，确保试卷质量', '提示', {
        confirmButtonText: '确定',
        showCancelButton: false,
        callback: action => {
        
         kaiguan.value=true;
         aa.value.kaiguan=kaiguan.value
        }
      });

          tokenStore.token01 = aa.value;
  
        } else {
          console.error('试卷结构表单验证失败');
        }
      });
    }
  };
  </script>
  
   <style lang='scss' scoped>
  .el-select {
    width: 200px; // 根据需要调整宽度
  }
  
  .container {
    margin-left: 20px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 16px; // 调整间距
  }
  
  .flex-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px; // 调整间距
  }
  
  h1 {
    margin-right: 16px; // 调整标题与标签之间的间距
  }
  
  .quiz-page {
    background-image: url('@/assets/img/GodHand.png');
    background-size: 10px 100%;
    background-repeat: no-repeat;
    width: 97%;
    margin-top: 20px;
    margin-left: 20px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    position: relative; // 添加相对定位
  }
  
  .question {
    margin-bottom: 20px;
  }
  
  .options {
    margin-top: 10px;
    display: flex;
    flex-direction: column; /* 改为竖排 */
  }
  
  .options label {
    margin-bottom: 10px; /* 增加选项间的间距 */
    cursor: pointer;
  }
  
  .extra-info {
    margin-top: 20px;
    font-size: 0.9em;
    color: #666;
    text-align: right; // 文字靠右对齐
    position: absolute; // 绝对定位
    bottom: 20px; // 距离底部20px
    right: 20px; // 距离右边20px
  }
  
  .hidden-radio {
    display: none; /* 隐藏默认的 radio 按钮 */
  }
  
  .red-rounded-button {
    background-color: red;
    color: white;
    border: none;
    border-radius: 20px; // 圆角按钮
    padding: 10px 20px;
    cursor: pointer;
  }
  .preview-question-img {
    margin-right: 300px;
    border: 1px solid black;
    width: 400px;
    height: 150px;
  }
  
  .page-wrapper {
    position: relative;
    min-height: 100vh; // 确保有足够的高度来容纳子元素
  }
  
  .preview-button-container {
    position: fixed; // 固定位置
    bottom: 10px; // 距离底部20px
    left:80px; // 距离左边20px
    display: flex;
    gap: 20px;
    z-index: 1000; // 确保按钮在最上层
  }
  
  .card-container-dashboard {
    margin-top: -18px;
    width: 100%;
    padding: 20px;
  }
  
  .card-container {
    margin-bottom: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  
  
  
  
  
  // 对话框
  .preview-quiz-page {
    width: 100%;
    margin-bottom: 20px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
  }
  
  .preview-question {
    margin-bottom: 20px;
  }
  
  .preview-options {
    margin-top: 10px;
  }
  
  .preview-options label {
    display: block;
    margin-bottom: 10px;
  }
  
  .preview-question-img {
    margin-top: 10px;
    max-width: 100%;
    height: auto;
  }
  
  .right-section h1 {
    margin-left: 20px; /* 增加左边距 */
  }
  
  // 暂无数据样式
  .no-data {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* 使容器高度占满整个视口 */
    text-align: center;
  }
  </style>